<template>
  <div class="con">
    <van-card
      @click="tap(item._id)"
      v-for="item in list"
      :price="item.price+'.00'"
      :desc="item.descriptions"
      :title="item.name"
      :thumb="item.coverImg"
    />
  </div>
</template>

<script>
import * as api from "../api/getProlist";
import axios from "axios";
export default {
  name: "Prolist",
  props: ["id"],
  data() {
    return {
      list: [],
      title: ""
    };
  },
  methods: {
    tap(pid) {
      console.log(pid);
      this.$router.push("/detail/" + pid);
    }
  },
  mounted() {
    console.log(this.id);
    api
      .getProlist({ per: 1000, product_category: this.$route.params.id })
      .then(data => {
        let cateId = data.data.products[0].productCategory;
        let obj = this.$store.state.categoryList.filter(v => v.id == cateId)[0];
        this.title = obj.categoryName;
        this.$emit("toparent", this.title);
        this.list = data.data.products;
      });
  },
  watch: {
    id: function(val, oldVal) {
      console.log(val, oldVal);
      api.getProlist({ per: 1000, product_category: val }).then(data => {
        let cateId = data.data.products[0].productCategory;
        let obj = this.$store.state.categoryList.filter(v => v.id == cateId)[0];
        this.title = obj.categoryName;
        console.log(obj);
        console.log(this.title);
        this.$emit("toparent", this.title);
        this.list = data.data.products;
      });
    }
  }
};
</script>

<style>
.con {
  height: 800px;
  overflow: auto;
  margin-left: 70px;
}
</style>